.ibutton-container { position: relative; height: 27px; cursor: pointer; overflow: hidden; /* set max width to that of sprite */ max-width: 400px; /* prevent text selection */ -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -moz-user-focus: ignore; -moz-user-input: disabled; /* set default width based on ON/OFF labels */ width: 89px; }
.ibutton-container input { position: absolute; top: 0; left: 0; /* hide the element */ filter: alpha(opacity=0); -moz-opacity: 0.0; opacity: 0.0; /* allow checking of input if visible */ -moz-user-input: enabled  !important; }

.ibutton-handle { display: block; height: 27px; cursor: inherit; position: absolute; top: 0; left: 0; width: 0; background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 0 -54px; z-index: 3; padding-left: 3px; /* set default width based on ON/OFF labels */ width: 33px; }

.ibutton-handle-right { height: 100%; width: 100%; padding-right: 3px; background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 100% -54px; z-index: 3; }

.ibutton-handle-middle { height: 100%; width: 100%; background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 50% -54px; z-index: 3; }

div.ibutton-label-on, div.ibutton-label-off { white-space: nowrap; font-size: 17px; line-height: 17px; font-weight: bold; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; text-transform: uppercase; cursor: inherit; display: block; height: 27px; position: absolute; width: auto; top: 0; padding-top: 5px; overflow: hidden; background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 0 0; }

div.ibutton-label-on { color: #fff; text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4); left: 0; padding-top: 5px; z-index: 1; }
div.ibutton-label-on span { padding-left: 5px; }

div.ibutton-label-off { color: #7c7c7c; background-position: 100% 0; text-shadow: 0 -1px 2px rgba(153, 153, 153, 0.4); text-align: right; right: 0; /* the off label needs to near the left edge (ideally just 5px away) it just needs to be close enough that it won't show under the handle if dragged to the left */ width: 95%; }
div.ibutton-label-off span { padding-right: 5px; }

/* create an outline when button gets focus via keyboard */
.ibutton-container label { cursor: inherit; padding: 1px 3px; font-size: 1em !important; display: inline !important; }

.ibutton-focus label { /* we must use border, since outline doesn't work in IE */ border: 1px dotted #666 !important; padding: 0 2px; }
.ibutton-focus div.ibutton-label-on span label { /* use white for more contrast */ border-color: #fff !important; }

/* add padding to right/left so that text gets clipped before absolute edge */
.ibutton-padding-left, .ibutton-padding-right { position: absolute; top: 4px; z-index: 2; background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 0 -4px; width: 3px; height: 20px; }

.ibutton-padding-left { left: 0; }

.ibutton-padding-right { right: 0; background-position: 100% -4px; }

/* change the styles of the handle when being dragged */
.ibutton-active-handle .ibutton-handle { background-position: 0 -108px; }
.ibutton-active-handle .ibutton-handle-right { background-position: 100% -108px; }
.ibutton-active-handle .ibutton-handle-middle { background-position: 50% -108px; }

/* styles to use when the button is disabled */
.ibutton-disabled { cursor: not-allowed !important; /* cursor options: default or not-allowed */ }
.ibutton-disabled .ibutton-handle { background-position: 0 -81px; }
.ibutton-disabled .ibutton-handle-right { background-position: 100% -81px; }
.ibutton-disabled .ibutton-handle-middle { background-position: 50% -81px; }
.ibutton-disabled div.ibutton-label-on { background-position: 0 -27px; }

.ibutton-disabled div.ibutton-label-off { background-position: 100% -27px; }

.ibutton-disabled .ibutton-padding-left { background-position: 0 -27px; }

.ibutton-disabled .ibutton-padding-right { background-position: 100% -27px; }

.ibutton-disabled div.ibutton-label-on { color: #fff; }

.ibutton-disabled div.ibutton-label-off { color: #cbcbcb; }

/* ===== iPhone like checkboxes ===== */
.whead .on_off { padding: 9px 9px 7px 9px; float: right; }

.whead .on_off .ibutton-container { float: right; }

.whead .on_off [class^="icon-"], .whead .on_off [class*=" icon-"] { margin-top: 3px; display: block; float: left; }

.on_off .ibutton-label-off span { background: url(../images/no.png) no-repeat; width: 8px; height: 9px; position: relative; left: -4px; display: block; float: right; padding-top: 0; margin-top: 2px; padding-right: 7px; text-indent: -9999px; }

.on_off .ibutton-label-on span { background: url(../images/yes.png) no-repeat; width: 11px; left: -1px; position: relative; height: 11px; display: block; float: right; padding-top: 0px; margin-top: 1px; padding-right: 7px; }

.on_off .ibutton-label-off { color: #fff; background-position: 100% 0; text-shadow: 0 1px #808080; text-align: right; right: 0; width: 95%; }

.on_off .ibutton-container { height: 21px; }

.on_off .ibutton-label-on { color: #fff; text-shadow: 0 1px #808080; left: 0; z-index: 1; background-position: 0 -52px; }

.on_off .ibutton-label-off { background-position: 100% -52px; }

.on_off .ibutton-label-on, .on_off .ibutton-label-off { height: 21px; }

.on_off .ibutton-handle { height: 20px; background-position: 0 -73px; }

.on_off .ibutton-handle-right { background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 100% -73px; }

.on_off .ibutton-handle-middle { background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 50% -73px; }

.on_off .ibutton-padding-left, .on_off .ibutton-padding-right { position: absolute; top: 0; z-index: 2; background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 0 -52px; width: 3px; height: 20px; }

.on_off .ibutton-padding-right { background-position: 100% -52px; }

.ibutton-container { position: relative; height: 26px; cursor: pointer; overflow: hidden; max-width: 400px; -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -moz-user-focus: ignore; -moz-user-input: disabled; width: 89px; }

.ibutton-container input { position: absolute; top: 0; left: 0; filter: alpha(opacity=0); -moz-opacity: 0.0; opacity: 0.0; -moz-user-input: enabled  !important; }

.ibutton-handle { display: block; height: 25px; cursor: inherit; position: absolute; top: 0; left: 0; width: 0; background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 0 -26px; z-index: 3; padding-left: 3px; width: 33px; }

.ibutton-handle-right { height: 100%; width: 100%; padding-right: 3px; background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 100% -26px; z-index: 3; }

.ibutton-handle-middle { height: 100%; width: 100%; background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 50% -26px; z-index: 3; }

div.ibutton-label-on, div.ibutton-label-off { white-space: nowrap; font-size: 11px; line-height: 18px; font-weight: bold; text-transform: uppercase; cursor: inherit; display: block; height: 26px; position: absolute; width: auto; top: 0; padding-top: 4px; overflow: hidden; text-align: center; background: transparent url(../images/ibutton-slider-default.png) no-repeat scroll 0 0; }

div.ibutton-label-on { color: #fff; text-shadow: 0 1px #808080; left: 0; z-index: 1; }

div.ibutton-label-on span { padding-left: 0px; }

div.ibutton-label-off { color: #fff; background-position: 100% 0; text-shadow: 0 1px #808080; text-align: right; right: 0; width: 95%; }

div.ibutton-label-off span label { padding-right: 10px; margin-left: -2px; }

.ibutton-padding-left { left: 0; }

.ibutton-padding-right { right: 0; }

.ibutton-disabled { cursor: not-allowed !important; opacity: 0.6; filter: alpha(opacity=60); }
